<template>
  <div id="item">
    <div class="box"
         :style="{'border-top':'3px solid' + item.background }"
          @mouseenter="changeColor(true)"
          @mouseleave="changeColor(false)"
         :class="{isHover:'boxHover'}">
      <div class="icon" :style="{'background-color':item.background }">
        <i :class="item.icon" class="iconItem"></i>
      </div>
      <div class="title"><h3>{{item.title}}</h3></div>
      <div class="item-content">
        {{item.content}}
      </div>
      <el-button round v-show="!isHover" class="hover">
        {{item.text}}
         <i class="el-icon-right buttonIcon"></i>
      </el-button>
      <el-button round
                 v-show="isHover"
                 class="leave"
                 @click="changeRouter"
                 :style="{'background-color':item.background}">
        {{item.text}}
        <i class="el-icon-right buttonIcon"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "QualityServiceItem",
    props:{
      item:Object
    },
    data(){
      return{
        isHover:false
      }
    },
    methods:{
      changeColor(item){
        this.isHover = item
      },
      changeRouter(){
        this.$router.push(this.item.path)
      }
    }
  }
</script>

<style scoped>
  .box{
    width: 230px;
    height: 230px;
    /*background: #840f42;*/
    border: 1px solid #cec4c4;
    margin: 0 10px;
    position: relative;
    padding: 10px;
  }
  .boxHover{
    box-shadow: #666666;
    transform: translateZ(3px);
    border-bottom: 4px solid #1d8925;
  }
  .icon{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left: 75px;
    top: -50px;
  }
  .iconItem{
    font-size: 50px;
    color: #f0f0f0;
    padding: 25px;
  }
  h3{
    padding-top: 30px;
  }
  .item-content{
    padding: 10px 20px;
    height: 70px;
    font-size: 12px;
  }
  .el-button:hover{
    color: #fff;
  }
  .hover{
    width: 150px;
    height: 40px;
    padding: 0 !important;
    line-height: 40px;
    background-color: #f0f0f0;
    color: #1588bd;
  }
  .leave{
    width: 150px;
    height: 40px;
    padding: 0 !important;
    line-height: 40px;
    color: #fff;
  }
  .buttonIcon{
    font-size: 18px;
    margin-left: 10px;
  }
</style>